<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
    <!-- 只包含基础模块
    <script src="../js/zepto-master/zepto.min.js"></script>
    添加selector模块
    <script src="../js/zepto-master/src/selector.js"></script>
    添加animate模块
    <script src="../js/zepto-master/src/fx.js"></script>
    引入touch模块
    <script src="../js/zepto-master/src/touch.js"></script>     -->
    <!-- 将上面的主模块和附加模块打包在一起 -->
    <script src="../js/zepto.min.js"></script>
</head>
<body>
<div class="jd_layout">
    <!-- 1. 搜索块 -->
    <div class="jd_search">
        <a href="javascript:;" class="jd_logo"></a>
            <form action="" class="jd_searchBox">
                <input type="text" placeholder="请输入商品名称">
            </form>
        <a href="javascript:;" class="jd_login">登录</a>
    </div>
    <!-- 2. 轮播图 -->
    <div class="jd_banner clearfix">
        <!-- 图片 -->
        <ul class="jd_bannerImg">
            <li>
                <a href="javascript:;">
                    <img class="broadcast_first" src="../img/broadcast_picture1.jpg">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img class="broadcast_second" src="../img/broadcast_picture2.jpg">
                    <img src="../img/broadcast_picture22.png" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img class="broadcast_third" src="../img/broadcast_picture3.jpg">
                    <img src="../img/broadcast_picture33.png" alt="">
                </a>
            </li>
        </ul> 
        <!-- 点标记 -->
        <ul class="jd_bannerIndicator">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 3. 导航条 -->
    <div class="jd_nav">
        <ul>
            <li>
                <a href="">
                    <div></div>
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="">
                        <div></div>
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="">
                        <div></div>
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="">
                        <div></div>
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="">
                        <div></div>
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="">
                        <div></div>
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="">
                        <div></div>
                    <p>商品分类</p>
                </a>
            </li>
            <li>
                <a href="">
                        <div></div>
                    <p>商品分类</p>
                </a>
            </li>
        </ul>
    </div>
    <!-- 4. 产品块 -->
    <div class="jd_product">
        <div class="jd_productBox clearfix jd_sk">
            <div class="jd_pTip">
                <div class="jd_left f_left">
                    <span class="jd_sk_icon f_left"></span>
                    <span class="jd_sk_text f_left">掌上秒杀</span>
                    <div class="jd_sk_time f_left">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                </div>
                <div class="jd_right f_right">更多秒杀...</div>
            </div>
            <div class="jd_pContent clearfix">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img src="../img/uploads/sk_detail1.png" alt="">
                        </a>
                        <p>￥18.00</p>
                        <p>￥10.00</p>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../img/uploads/sk_detail1.png" alt="">
                        </a>
                        <p>￥18.00</p>
                        <p>￥10.00</p>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../img/uploads/sk_detail1.png" alt="">
                        </a>
                        <p>￥18.00</p>
                        <p>￥10.00</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="jd_productBox">
            <div class="jd_pTip">
                <h3>京东超市</h3>
            </div>
            <div class="jd_pContent clearfix">
                <a href="javascript:;" class="f_left b_right">
                    <img src="../img/uploads/jd_product1.png" alt="">
                </a>
                <a href="javascript:;" class="f_left">
                    <img src="../img/uploads/jd_product2.png" alt="">
                </a>
                <a href="javascript:;" class="f_left">
                    <img src="../img/uploads/jd_product3.png" alt="">
                </a>
            </div>
        </div>
        <div class="jd_productBox">
            <div class="jd_pTip">
                <h3>京东超市</h3>
            </div>
            <div class="jd_pContent clearfix">
                <a href="javascript:;" class="f_right b_right">
                    <img src="../img/uploads/jd_product1.png" alt="">
                </a>
                <a href="javascript:;" class="f_right">
                    <img src="../img/uploads/jd_product2.png" alt="">
                </a>
                <a href="javascript:;" class="f_right">
                    <img src="../img/uploads/jd_product3.png" alt="">
                </a>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 原生js实现方式 得在banner的ul中添加两个li  一个为第一行一个为最后一张 而且banner的宽度和li的宽度都要重新设置-->
<!-- <script src="../js/search.js"></script> -->
<script>
    // zepto实现轮播图 
    $(function(){
        // 1. 添加首尾两张图片
        var banner = $(".jd_banner");
        var bannerWidth = banner.width();
        // 获取图片盒子
        var imgBox = banner.find("ul:first-of-type");
        // 获取点标记 ul:eq(1) 需要添加selector.js
        var indicators = banner.find("ul:eq(1)").find("li");
        // 获取首尾两张图片
        var first = imgBox.find("li:first-of-type");
        var last = imgBox.find("li:last-of-type");

        // clone()完全克隆 第一张放到最后面 最后一张放到第一位
        // 所以用zepto实现轮播图 ul不需要前后两张图片
        imgBox.append(first.clone());
        last.clone().insertBefore(first);

        // 2. 重新设置图片盒子的宽度和图片的宽度
        // 设置图片盒子的宽度啊
        var lis = imgBox.find("li"); 
        var count = lis.length;
        imgBox.width(count * bannerWidth);
        // 设置li的宽度
        lis.each(function(index,value){
            $(lis[index]).width(bannerWidth);
        });
        // 设置默认偏移
        imgBox.css("left",-bannerWidth);
        
        // 3. 开启定时器 实现自动轮播
        var timeId = "";
        // 设置图片索引
        var index = 1;
        // 图片轮播的动画函数/根据index决定那张显示
        var imgAnimation = function(isSwip){
            // 如果isSwip是true说明是滑动触发的动画效果
            var isSwip = isSwip || false;
            // 开启过渡
            // 设置定位
            // 用zepto的animate函数实现
            imgBox.animate(
                {"left":-index*bannerWidth},
                250,
                "ease-in-out",
                function(){
                    // 回调函数
                    // 判断当前索引是否为最后一张或者第一张
                    if (index == count-1) {
                        index = 1;
                        imgBox.css("left",-index * bannerWidth);
                    }else if(index == 0){
                        index = count-2;
                        imgBox.css("left",-index*bannerWidth);
                    }
                    // 设置点样式
                    indicators.removeClass("active").eq(index-1).addClass("active");
                }
            );
            // 滑动时关闭了计时器  重新开启
            if (isSwip) {
                timeId = setInterval(function(){
                    index++;
                    imgAnimation();
                },2500);
            }
        };
        timeId = setInterval(function(){
            index++;
            imgAnimation();
        },2500);
        // 4. 添加移动端滑动事件 实现手动轮播
        // 左滑动
        // 在谷歌浏览器中 无法正确触发swipe事件 但是可以触发tap事件
        // 只是在手机模拟器里面有兼容性问题  真机木得
        imgBox.on("swipeLeft",function(){
            index++;
            // 清除定时器
            clearInterval(timeId);
            imgAnimation(true);
        });
        // 右滑动
        imgBox.on("swipeRight",function(){
            index--;
            clearInterval(timeId);
            imgAnimation(true);
        });
        // 5. 添加过度效果结束之后的监听
    });
    
</script>
</html>